<template>
  <div class="teacher-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-user-plus"></i> 教师管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <!-- 统计卡片区域 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">教师总数</div>
              <div class="stat-value">{{ tableData.length }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon green">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">系部数量</div>
              <div class="stat-value">{{ departments.length }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon blue">
              <i class="el-icon-data-analysis"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">平均教师数</div>
              <div class="stat-value">{{ getAverageTeachers() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon purple">
              <i class="el-icon-pie-chart"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">系部分布</div>
              <div class="stat-value">{{ getDepartmentDistribution() }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 搜索和操作区域 -->
      <div class="action-card">
        <el-row :gutter="24" type="flex" justify="space-between" align="middle">
          <el-col :span="4">
            <el-button @click="create" type="primary" icon="el-icon-plus" size="medium" class="create-btn">创建教师</el-button>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-input
                  v-model="queryForm.name"
                  placeholder="请输入教师姓名"
                  prefix-icon="el-icon-user"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
              <el-col :span="12">
                <el-input
                  v-model="queryForm.departmentName"
                  placeholder="请输入系名称"
                  prefix-icon="el-icon-office-building"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-button @click="query" type="primary" icon="el-icon-search" class="search-btn">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 教师卡片列表 -->
      <div class="teacher-cards">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in tableData" :key="index">
            <div class="teacher-card">
              <div class="teacher-card-header">
                <div class="teacher-info">
                  <span class="teacher-name">{{ item.name }}</span>
                  <el-tag size="small" type="success" effect="plain">{{ item.departmentName }}</el-tag>
                </div>
                <div class="teacher-number">
                  <el-tag size="small" type="info">{{ item.number }}</el-tag>
                </div>
              </div>
              <div class="teacher-card-content">
                <div class="info-item">
                  <i class="el-icon-office-building"></i>
                  <span>所属系部：{{ item.departmentName }}</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-medal"></i>
                  <span>工号：{{ item.number }}</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-collection-tag"></i>
                  <span>教师ID：{{ item.id }}</span>
                </div>
              </div>
              <div class="teacher-card-footer">
                <el-button
                  @click="edit(item.id)"
                  type="primary"
                  icon="el-icon-edit"
                  size="small"
                >编辑</el-button>
                <el-button
                  @click="deleteItem(item.id)"
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                >删除</el-button>
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="pagination-container">
          <el-pagination
            @current-change="getPage"
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            :total="pageSize * pageCount"
            background
            layout="total, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 编辑对话框 -->
      <el-dialog
        :visible.sync="editing"
        :title="entityForm.id === -1 ? '新增教师' : '编辑教师'"
        width="500px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="custom-dialog"
      >
        <el-form
          :model="entityForm"
          ref="form"
          label-width="80px"
          class="custom-form"
        >
          <el-form-item label="工号" prop="number">
            <el-input
              v-model="entityForm.number"
              placeholder="请输入工号"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="entityForm.name"
              placeholder="请输入姓名"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="所属系" prop="departmentId">
            <el-select
              v-model="entityForm.departmentId"
              placeholder="请选择系"
              class="custom-select"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in departments"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="entityForm.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editing = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/admin/teacher";
import * as departmentApi from "../../api/admin/department";

export default {
  name: "AdminTeacher",
  data() {
    return {
      queryForm: {
        departmentName: "",
        name: ""
      },
      entityForm: {},
      tableData: [],
      pageSize: api.pageSize,
      pageCount: 1,
      pageIndex: 1,
      editing: false,
      loading: false,
      departments: []
    };
  },
  methods: {
    query() {
      this.loading = true;
      api.getPageCount(this.queryForm.departmentName, this.queryForm.name)
        .then(res => {
          this.pageCount = res;
          this.pageIndex = 1;
          this.getPage(1);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getPage(pageIndex) {
      this.loading = true;
      api.getPage(pageIndex, this.queryForm.departmentName, this.queryForm.name)
        .then(res => {
          this.tableData = res;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    create() {
      this.entityForm = {
        id: -1,
        number: "",
        name: "",
        departmentId: "",
        password: ""
      };
      this.editing = true;
    },
    edit(id) {
      api.get(id).then(res => {
        this.entityForm = res;
        this.editing = true;
      });
    },
    save() {
      if (this.entityForm.id === -1) {
        api.create(this.entityForm).then(() => {
          this.finishSave();
        });
      } else {
        api.update(this.entityForm).then(() => {
          this.finishSave();
        });
      }
    },
    finishSave() {
      this.$message.success("操作成功");
      this.getPage(this.pageIndex);
      this.editing = false;
    },
    deleteItem(id) {
      this.$confirm('确认删除该教师吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteItem(id).then(() => {
          this.$message.success("删除成功");
          this.getPage(this.pageIndex);
        });
      }).catch(() => {});
    },
    getDepartments() {
      departmentApi.listName().then(res => {
        this.departments = res;
      });
    },
    // 统计方法
    getAverageTeachers() {
      if (this.departments.length === 0) return '0';
      return Math.round(this.tableData.length / this.departments.length) + '人';
    },
    getDepartmentDistribution() {
      const departmentCount = {};
      this.tableData.forEach(teacher => {
        departmentCount[teacher.departmentName] = (departmentCount[teacher.departmentName] || 0) + 1;
      });
      const maxDepartment = Object.entries(departmentCount)
        .sort((a, b) => b[1] - a[1])[0];
      return maxDepartment ? `${maxDepartment[0]}:${maxDepartment[1]}人` : '暂无数据';
    }
  },
  created() {
    this.query();
    this.getDepartments();
  }
};
</script>

<style scoped>
.teacher-wrap {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 100px);
}

.crumbs {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.crumbs .el-breadcrumb {
  font-size: 16px;
  color: #606266;
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;

  i {
    font-size: 24px;
    color: #fff;
  }

  &.green {
    background: #67C23A;
  }

  &.blue {
    background: #409EFF;
  }

  &.purple {
    background: #6B48FF;
  }
}

.stat-info {
  flex: 1;

  .stat-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
}

/* 操作区域卡片 */
.action-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 教师卡片样式 */
.teacher-cards {
  margin-bottom: 20px;
}

.teacher-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.teacher-card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .teacher-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .teacher-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }

  .teacher-number {
    color: #909399;
  }
}

.teacher-card-content {
  padding: 20px;

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #606266;

    i {
      font-size: 16px;
      margin-right: 8px;
      color: #909399;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.teacher-card-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  background: #f8f9fa;

  .el-button {
    margin-left: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 搜索框样式 */
.search-input {
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.search-btn {
  padding: 12px 20px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 创建按钮样式 */
.create-btn {
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 分页器样式 */
.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  text-align: right;
}

/* 弹窗样式 */
.custom-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
  }
  
  ::v-deep .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    margin: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  ::v-deep .el-dialog__body {
    padding: 24px;
  }
  
  ::v-deep .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    background: #f8f9fa;
  }
}

.custom-form {
  ::v-deep .el-form-item__label {
    font-weight: 500;
    color: #606266;
  }
  
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.custom-select {
  ::v-deep .el-input__inner {
    border-radius: 4px;
  }
}
</style>
